import React from 'react'
import { PaperCard } from '../papers/PaperCard'
import { Button } from '../ui/Button'
import { ArxivPaper } from '../../types/auth'
import { RefreshCw, Sparkles, ArrowRight } from 'lucide-react'

interface RecommendationSectionProps {
  papers: ArxivPaper[]
  loading: boolean
  onRefresh: () => void
}

export function RecommendationSection({ papers, loading, onRefresh }: RecommendationSectionProps) {
  if (loading) {
    return (
      <div className="bg-white rounded-lg border border-gray-200 p-6">
        <div className="flex items-center justify-between mb-6">
          <div className="flex items-center space-x-2">
            <Sparkles className="h-5 w-5 text-purple-500" />
            <h2 className="text-lg font-semibold text-gray-900">Personalized Recommendations</h2>
          </div>
        </div>
        <div className="space-y-4">
          {[1, 2, 3].map(i => (
            <div key={i} className="animate-pulse">
              <div className="h-4 bg-gray-200 rounded mb-2"></div>
              <div className="h-3 bg-gray-200 rounded mb-2 w-3/4"></div>
              <div className="h-3 bg-gray-200 rounded w-1/2"></div>
            </div>
          ))}
        </div>
      </div>
    )
  }

  return (
    <div className="bg-white rounded-lg border border-gray-200 p-6">
      <div className="flex items-center justify-between mb-6">
        <div className="flex items-center space-x-2">
          <Sparkles className="h-5 w-5 text-purple-500" />
          <h2 className="text-lg font-semibold text-gray-900">Personalized Recommendations</h2>
        </div>
        <div className="flex items-center space-x-2">
          <Button 
            variant="ghost" 
            size="sm"
            onClick={onRefresh}
            disabled={loading}
          >
            <RefreshCw className={`h-4 w-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
            Refresh
          </Button>
          <Button 
            variant="outline" 
            size="sm"
            onClick={() => window.location.href = '/app/browse'}
          >
            View All <ArrowRight className="h-4 w-4 ml-2" />
          </Button>
        </div>
      </div>

      {papers.length === 0 ? (
        <div className="text-center py-8">
          <Sparkles className="h-8 w-8 mx-auto mb-3 text-gray-400" />
          <p className="text-gray-600">No recommendations available right now.</p>
          <p className="text-sm text-gray-500 mt-1">
            Try updating your research interests or check back later.
          </p>
        </div>
      ) : (
        <div className="space-y-4">
          {papers.slice(0, 5).map(paper => (
            <PaperCard 
              key={paper.id} 
              paper={paper} 
              variant="compact"
              showBookmark
            />
          ))}
        </div>
      )}
    </div>
  )
}